<script setup>
import { useRouter } from 'vue-router';
import { ref, computed } from 'vue';
import { changePasswordFn } from '@/api/user';
import { useUserStore } from '@/stores/user';
import { showToast } from 'vant';

const user = useUserStore()
const oldPassword = ref('')
const password = ref('')
const password2 = ref('')
const router = useRouter()

const flag = computed(() => {
    return !(password.value.length >= 6 && password.value == password2.value && oldPassword.value.length >= 6 && password.value != oldPassword.value)
})

function tomy() {
    router.back()
}

function onSubmit() {
    changePasswordFn({
        userid: user.userInfo.userid,
        oldPassword: oldPassword.value,
        password: password.value,
    }).then(res => {
        console.log(res);
        showToast(res.message)
        if (res.data.user) {
            router.push('/login')
        }
    })
}
</script>

<template>
    <div class="main">
        <van-nav-bar title="修改密码" left-text="返回" left-arrow @click-left="tomy" />
        <div class="content">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="oldPassword" name="原密码" label="原密码" placeholder="请输入原密码"
                        :rules="[{ required: true, message: '请填写原密码' }]" type="password" />
                    <van-field v-model="password" name="新密码" label="新密码" placeholder="请输入至少6位新密码"
                        :rules="[{ required: true, message: '请填写至少6位的密码' }]" type="password" />
                    <van-field v-model="password2" name="确认密码" label="确认密码" placeholder="请再次输入密码"
                        :rules="[{ required: true, message: '请确认密码' }]" type="password" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="danger" native-type="submit" :disabled="flag">
                        确定修改
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>